import type { errorMessagePropsType } from './typings'
import { defineComponent, ref } from 'vue'
import { ElDialog, ElTable, ElTableColumn, ElIcon } from 'element-plus'
import styles from '../../index.module.scss'
import { CircleClose } from '@element-plus/icons-vue'
export default defineComponent({
  name: 'ErrorRelevenceModal',
  props: ['errorMessage', 'visible', 'cancel'],
  setup(props: errorMessagePropsType) {
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    return () => (
      <ElDialog
        title={'关联设施'}
        modelValue={!!props.visible}
        append-to-body
        width="42%"
        closeOnClickModal={false} // 点遮罩层不关弹窗
        draggable // 可拖拽
        beforeClose={props.cancel}
      >
        <div class={styles['relenvence-error-header']}>
          <div class={styles['error-title']}>
            <ElIcon {...{ color: 'red', size: 20 }}>
              <CircleClose />
            </ElIcon>
            <span>关联失败</span>
          </div>
          <div class={styles['error-summary']}>
            共计<p class={styles['error-color']}>{props?.errorMessage?.length}</p>条失败数据
          </div>
        </div>

        <ElTable data={props?.errorMessage} ref={multipleTableRef} row-key="assetId" border>
          <ElTableColumn prop="name" label="设施名称" />
          <ElTableColumn prop="message" label="失败原因" />
        </ElTable>
      </ElDialog>
    )
  }
})
